<template>
  <div class="material-releases-cate">
    <div class="content-operations">
      <div class="flex-pop">
        <div @click="closePop">取消</div>
        <div class="title">选择分类</div>
        <div class="click-release" @click="releaseClick()">选择</div>
      </div>
      <div class="set-label">
        <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/common/search-icon.png" class="search">
        <input class="label-input" v-model="search" @keyup.enter="onSearch" placeholder="可根据分类名称进行搜索" />
        <img src="https://img.wifenxiao.com/h5-wfx/images/icon_close.png" class="close" @click.stop="onClear()">
      </div>
    </div>
    <div class="all-cate" v-if="allCate.length > 0">
       <van-checkbox-group
          v-model="cate"
          @change="handleChangeEvent"
          ref="checkboxGroup">
          <van-checkbox :name="item.id"
                        checked-color="#F42B2B"
                        class="cate-item"
                        v-for="item in allCate"
                        @click="handleChangeEventChecked"
                        :key="item.id">
            <div class="cate-check">
              <img :src="item.image">
              <span class="title">{{item.name}}</span>
            </div>
          </van-checkbox>
        </van-checkbox-group>
    </div>
    <div class="all-cate" v-else>
      <no-data :noData="noData"></no-data>
    </div>

  </div>
</template>
<script>
import addLabel from './addLabel'
import noData from '@/components/noData/index'
import { getAllCate } from '@/api/community/materialCenter'
import Vue from 'vue'
import { CheckboxGroup } from 'vant'

Vue.use(CheckboxGroup)
export default {
  components: {
    addLabel,
    noData
  },
  props: {
    category_ids: {
      type: Array,
      default: []
    },
    number: {
      type: Number,
      default: 0
    },
    categoryPopup: {
      type: Boolean,
      default: false
    }
    // allCate: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      cate: [],
      label: '',
      search: '',
      allCate: [],
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/commentList/no_evaluate.png',
        text: '暂无分类',
        marginTop: '0px'
      }
    }
  },
  watch: {
    number(val) {
      if (this.categoryPopup) {
        this.cateLists()
        this.cate = [...this.category_ids]
      }
    }
  },
  created() {
    this.cateLists()
  },
  methods: {
     // 改变选择的商品
    handleChangeEvent(names) {
      // console.log('names', names)
    },
    handleChangeEventChecked() {

    },
    closePop() {
      this.$emit('success', 'close')
    },
    onClear() {
      this.search = ''
      this.cateLists()
    },
    cateLists() {
      this.$loadingWrap.show()
      getAllCate({ gys_add: 1, name: this.search }).then(res => {
        if (res.status === 1) {
          this.$loadingWrap.close()
          this.allCate = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onSearch() {
      this.cateLists()
    },
    releaseClick() {
      this.$emit('success', this.cate)
    }
  }
}
</script>
<style lang="scss">
@import "src/styles/mixin";
.material-releases-cate {
  padding: 84px 24px 24px;;
  .content-operations {
    background: #f1f1f1;
    font-size: 28px;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 220px;
    .flex-pop {
      padding: 24px 24px 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 84px;
      .click-release {
        background: #FF2A40;
        color: #fff;
        padding: 16px 20px;
        border-radius: 8px;
        font-weight: 400;
      }
      .title {
        font-size: 30px;
        font-weight: 500;
      }
    }
    .set-label {
      margin: 20px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      .search {
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -13px;
        width: 26px;
      }
      .close {
        position: absolute;
        right: 0px;
        top: 0;
        // margin-top: -13px;
        width: 80px;
        padding: 27px;
      }
      .label-input {
        background: #fff;
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding: 20px 30px 20px 60px;
        font-size: 28px;
      }
    }
  }
  .all-cate {
    padding-top: 160px;
    .cate-item {
      .van-checkbox__icon .van-icon {
        position: relative;
        top: -16px
      }
      .van-checkbox__label {
        flex: 1;
      }
      .cate-check {
        padding: 0px 0 10px 20px;
        display: flex;
        align-items: center;
        // height: 100px;
        img {
          width: 60px;
          max-height: 60px;
          margin-right: 20px;
          border-radius: 6px;
        }
        .title {
          flex: 1;
          // height: 100px;
          // line-height: 100px;
          border-bottom: 2px solid #f1f1f1;
          @include lineClamp(24px,80px,1);
        }
      }

    }
  }

}
</style>